<template>
  <div>
    <van-nav-bar title="搜索地址" left-arrow @click-left="GOback" placeholder fixed :border="false" />
    <van-search v-model="value" show-action placeholder="请输入小区/写字楼/学校等" @search="onSearch(value)">
      <template #action>
        <van-button type="info" size="small" @search="onSearch(value)">确认</van-button>
      </template>
    </van-search>
    <div class="point" v-if="SearchAddressData.length===0">
      <p>找不到地址？</p>
      <p>请尝试输入小区、写字楼或学校名</p>
      <p>详细地址（如门牌号）可稍后输入哦。</p>
    </div>
    <ul class="getpois_ul" v-else>
      <li v-for="(item,index) in SearchAddressData" :key="index" @click="chooseAddress(item)">
        <p class="pois_name ellipsis">{{item.name}}</p>
        <p class="pois_address ellipsis">{{item.address}}</p>
      </li>
    </ul>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      value: ''
    }
  },
  computed: {
    ...mapState(['SearchAddressData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    // 搜索地址
    onSearch(value) {
      const obj = {
        value,
        id: window.sessionStorage.getItem('city_id')
      }
      this.$store.dispatch('SearchAddress', obj)
    },
    chooseAddress(item) {
      this.$store.commit('chooseAddressList', item)
      this.$router.replace('/user/info/address/add/')
    }
  }
}
</script>

<style lang="less" scoped>
</style>